/**
 * 获取canvas 2d context
 * @param {string} canvasId 
 */
var getCtx = function (canvasId) {
    var canvas = document.getElementById(canvasId);
    var ctx = canvas.getContext("2d");
    return ctx;
}

function Taichi() {
    this.colorA = "black";
    this.colorB = "red";
    this.bgColor = "yellow";
    this.deg = 0;
    /**
     * 大圆半径
     */
    this.r1 = 200;
    /**
     * 小圆半径
     */
    this.r2 = 100;
    this.timer1 = null;
    this.drawTime = 100;
    this.ctx = getCtx("canvas");
}

Taichi.prototype.drawFrame = function () {
    var ctx = this.ctx;
    var deg = this.deg;
    var r1 = this.r1;
    var r2 = this.r2;
    var colorA = this.colorA;
    var colorB = this.colorB;
    var bgColor = this.bgColor;

    var px = Math.sin(deg) * r2;
    var py = Math.cos(deg) * r2;

    ctx.clearRect(0, 0, 300, 300);
    ctx.fillStyle = bgColor;
    ctx.fill();
    
    ctx.beginPath();
    ctx.fillStyle = colorA;
    ctx.arc(r1, r1, 200, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colorB;
    ctx.beginPath();
    ctx.arc(r1, r1, 200, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colorB;
    ctx.beginPath();
    ctx.arc(r1 + px, r1 - py, 100, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colorA;
    ctx.beginPath();
    ctx.arc(r1 - px, r1 + py, 100, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colorA;
    ctx.beginPath();
    ctx.arc(r1 + px, r1 - py, 20, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = colorB;
    ctx.beginPath();
    ctx.arc(r1 - px, r1 + py, 20, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    deg += 0.1;
}

Taichi.prototype.start = function () {
    var self = this;
    this.timer1 = setInterval(function () {
        self.drawFrame();
    }, self.drawTime)
}

Taichi.prototype.stop = function () {
    clearInterval(this.timer1);
}

var taichi = new Taichi();

taichi.start();